<template>
  <div class="myrecord_main">
    <div class="record_whole" v-for="(list,index) in detail">
      <div class="main_record">
        <ul>
          <li class="one_li">
            <div class="one_span">
              <span>提交时间：</span><span>{{list.created_at*1000 | dateFmt('YYYY-MM-DD HH:mm:ss')}}</span>
            </div>
            <p v-show="list.status===1" class="red_color">未审核</p>
            <p v-show="list.status===2" class="blue_color">已通过</p>
            <p v-show="list.status===3" class="blue_color">未通过</p>
          </li>
          <li><span>提交人姓名：</span><span>{{list.name}}</span></li>
          <li><span>联系方式：</span><span>{{list.phone}}</span></li>
          <li><span>所属部门：</span><span>{{list.department}}</span></li>
          <li><span>开始时间：</span>{{list.time_start*1000 | dateFmt('YYYY-MM-DD HH:mm:ss')}}</li>
          <li><span>结束时间：</span>{{list.time_end*1000 | dateFmt('YYYY-MM-DD HH:mm:ss')}}</li>
          <li><span>请假天数：</span>{{list.day_num}}天</li>
          <li>
            <span>请假说明：</span>
            <div class="text_area">
              <textarea readonly="readonly" :placeholder="list.content"></textarea>
            </div>
          </li>
          <li><span>图片说明：</span>
            <div class="image_des clearfix">
              <div v-for="(item,index) in list.img" :key="index" class="img_li" v-show="list.img">
                <div class="img" v-lazy:background-image="item"></div>
              </div>
              <div class="img_li" v-show="!list.img">
                <div class="no_img"></div>
              </div>
            </div>
          </li>
          <li><span>审核管理员：</span>{{list.admin_name}}</li>
        </ul>
      </div>
      <div class="btn_show" v-show="list.status === 3">
        <button @click="resubmit(list.id)">
          <span>重新提交</span>
        </button>
      </div>
      <div class="gray_line"></div>
    </div>
  </div>
</template>
<style lang="scss">
  .myrecord_main {
    padding-top: 50px;
    width: 100%;
    .record_whole {
      width: 100%;
      .main_record {
        padding: 10px;
        ul {
          li {
            width: 100%;
            font-size: 15px;
            padding: 10px 0;
            .blue_color {
              color: #0078de;
            }
            .text_area {
              padding-top: 10px;
              textarea {
                box-sizing: border-box;
                width: 100%;
                padding: 10px;
                height: 120px;
                background: #f2f2f2;
                border-radius: 5px;
                resize: none;
                outline: none;
                border: none;
                font-size: 14px;
              }
            }
            .image_des {
              width: 100%;
              .img_li {
                width: 24%;
                height: 80px;
                margin-top: 1%;
                float: left;
                margin-left: 1%;
                .img {
                  width: 100%;
                  height: 100%;
                  background-size: cover;
                  background-color: #f2f2f2;
                }
              }
            }
          }
          .one_li {
            width: 100%;
            display: inline-flex;
            justify-content: space-between;
          }
        }
      }
      .gray_line {
        width: 100%;
        height: 5px;
        background: #f2f2f2;
      }
      .btn_show {
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
        button {
          width: 90%;
          height: 44px;
          background: #fff;
          border: 1px solid #0078de;
          outline: none;
          border-radius: 5px;
          margin-top: 20px;
          span {
            font-size: 15px;
            color: #0078de;
          }
        }
      }
    }
  }
</style>
<script>
  import { Toast, Indicator } from 'mint-ui'
  import { getMyAllMatters, getsetExamine } from '../../api/supervise'

  export default {
    data () {
      return {
        myList: [],
        subStatus: 1
      }
    },
    created () {
      this._getMyAllMatters()
    },
    methods: {
      _getMyAllMatters () {
        getMyAllMatters().then(res => {
          if (res.code === 200) {
            this.myList = res.data
            // console.log(this.myList)
          }
        })
      },
      resubmit (id) {
        Indicator.open({
          text: '提交中...',
          spinnerType: 'fading-circle'
        })
        getsetExamine(id, this.subStatus).then(res => {
          if (res.code === 200) {
            Indicator.close()
            Toast({
              message: res.data,
              position: 'middle',
              duration: 2500
            })
            this.$router.back()
          }
        })
      }
    },
    computed: {
      // 是最新发布的数据排在最前面
      detail () {
        if (this.myList.length < 0) {
          Toast({
            message: '暂无数据',
            position: 'middle',
            duration: 2500
          })
        } else {
          return this.myList.reverse()
        }
      }
    },
    components: {}
  }
</script>
